<template>
    <div style="padding: 10px; display: flex; align-items: flex-start; justify-content: space-between">
        <div class="left" style="width: 75%">
            <div class="leftTop" style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)">
                <div
                    style="
                        height: 30px;
                        line-height: 30px;
                        width: 100%;
                        border-bottom: 1px #ccc solid;
                        padding-left: 5px;
                    "
                >
                    {{ pageData.name }} / {{ route.query.clueId }}
                </div>
                <div style="padding: 10px">
                    <el-row :gutter="20">
                        <el-col :span="8"
                            ><div class="grid-content ep-bg-purple">
                                <div class="titleCon">线索创建时间</div>
                                <div class="conCon">{{ pageData.createTime }}</div>
                            </div></el-col
                        >
                        <el-col :span="8"
                            ><div class="grid-content ep-bg-purple">
                                <div class="titleCon">客户手机号码</div>
                                <div class="conCon">{{ pageData.phone }}</div>
                            </div></el-col
                        >
                        <el-col :span="8"
                            ><div class="grid-content ep-bg-purple">
                                <div class="titleCon">渠道来源</div>
                                <div class="conCon">{{ pageData.channelName }}</div>
                            </div></el-col
                        >
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8"
                            ><div class="grid-content ep-bg-purple">
                                <div class="titleCon">线索分配者</div>
                                <div class="conCon">{{ pageData.allocator }}</div>
                            </div></el-col
                        >
                        <el-col :span="8"
                            ><div class="grid-content ep-bg-purple">
                                <div class="titleCon">线索归属时间</div>
                                <div class="conCon">{{ pageData.belongTime }}</div>
                            </div></el-col
                        >
                        <el-col :span="8"
                            ><div class="grid-content ep-bg-purple">
                                <div class="titleCon">线索归属人</div>
                                <div class="conCon">{{ pageData.owner }}</div>
                            </div></el-col
                        >
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8"
                            ><div class="grid-content ep-bg-purple">
                                <div class="titleCon">所属促销活动信息</div>
                                <div class="conCon">
                                    {{ pageData.activityName }}/{{ pageData.activityInfo }}
                                </div>
                            </div></el-col
                        >
                        <el-col :span="8"><div class="grid-content ep-bg-purple"></div></el-col>
                        <el-col :span="8"
                            ><div class="grid-content ep-bg-purple">
                                <el-button type="primary" @click="unUser">无效线索</el-button>
                                <el-button type="danger" @click="business">转为商机</el-button>
                            </div></el-col
                        >
                    </el-row>
                </div>
            </div>
            <div class="leftBot" style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); margin-top: 10px">
                <div
                    style="
                        height: 30px;
                        line-height: 30px;
                        width: 100%;
                        border-bottom: 1px #ccc solid;
                        padding-left: 5px;
                    "
                >
                    线索跟进
                </div>
                <div style="padding: 10px">
                    <!-- 客户姓名行 -->
                    <el-row :gutter="20">
                        <el-col :span="8"
                            ><div class="grid-content ep-bg-purple">
                                <div class="titleCon">客户姓名</div>
                                <div class="conCon">
                                    <el-input v-model="pageData.name" />
                                </div></div
                        ></el-col>
                        <el-col :span="8"
                            ><div class="grid-content ep-bg-purple">
                                <div class="titleCon">客户性别</div>
                                <div class="conCon">
                                    <el-select v-model="pageData.gender" placeholder="Select" size="normal">
                                        <el-option label="男" :value="0"></el-option>
                                        <el-option label="女" :value="1"></el-option>
                                        <el-option label="未知" :value="2"></el-option>
                                    </el-select>
                                </div></div
                        ></el-col>
                        <el-col :span="8"
                            ><div class="grid-content ep-bg-purple">
                                <div class="titleCon">年龄</div>
                                <div class="conCon">
                                    <el-input-number v-model="pageData.age" @change="handleChange" />
                                </div></div
                        ></el-col>
                    </el-row>
                    <!-- 客户微信行 -->
                    <el-row :gutter="20">
                        <el-col :span="8"
                            ><div class="grid-content ep-bg-purple">
                                <div class="titleCon">客户微信号码</div>
                                <div class="conCon"><el-input v-model="pageData.weixin" /></div></div
                        ></el-col>
                        <el-col :span="8"
                            ><div class="grid-content ep-bg-purple">
                                <div class="titleCon">客户qq号码</div>
                                <div class="conCon"><el-input v-model="pageData.qq" /></div></div
                        ></el-col>
                        <el-col :span="8"
                            ><div class="grid-content ep-bg-purple">
                                <div class="titleCon">客户手机</div>
                                <div class="conCon"><el-input v-model="pageData.phone" /></div></div
                        ></el-col>
                    </el-row>
                    <!-- 客户意向等级 -->
                    <el-row :gutter="20">
                        <el-col :span="20"
                            ><div class="grid-content ep-bg-purple">
                                <div class="titleCon">客户意向等级</div>
                                <div class="conCon">
                                    <el-radio-group v-model="pageData.level" name="intentionLevel">
                                        <el-radio :label="1">近期报名</el-radio>
                                        <el-radio :label="2">打算报名，考虑中</el-radio>
                                        <el-radio :label="3">考虑一下</el-radio>
                                        <el-radio :label="4">打酱油</el-radio>
                                    </el-radio-group>
                                </div>
                            </div></el-col
                        >
                    </el-row>
                    <!-- 客户意向类型 -->
                    <el-row :gutter="20">
                        <el-col :span="20"
                            ><div class="grid-content ep-bg-purple">
                                <div class="titleCon">客户意向类型</div>
                                <div class="conCon">
                                    <el-radio-group v-model="pageData.subject" name="intentionLevel">
                                        <el-radio :label="1">舞蹈类</el-radio>
                                        <el-radio :label="2">游泳类</el-radio>
                                        <el-radio :label="3">拳击类</el-radio>
                                    </el-radio-group>
                                </div>
                            </div></el-col
                        >
                    </el-row>
                    <!-- 跟进记录 -->
                    <el-row :gutter="20">
                        <el-col :span="20"
                            ><div class="grid-content ep-bg-purple">
                                <div class="titleCon">跟进记录</div>
                                <div class="conCon" style="height: 50px; width: 100%">
                                    <el-input
                                        v-model="pageData.record"
                                        style="width: 100%"
                                        autosize="{
                                    minRows: 2, maxRows: 2 }"
                                        type="textarea"
                                        placeholder="请输入内容"
                                    />
                                </div></div
                        ></el-col>
                    </el-row>
                    <!-- 下次跟进时间 -->
                    <el-row :gutter="20">
                        <el-col :span="20"
                            ><div class="grid-content ep-bg-purple">
                                <div class="titleCon">下次跟进时间</div>
                                <div class="conCon">
                                    <el-date-picker
                                        v-model="pageData.nextTime"
                                        type="datetime"
                                        placeholder="请选择日期"
                                    />
                                </div></div
                        ></el-col>
                    </el-row>
                    <!-- 按钮 -->
                    <div style="display: flex; justify-content: right">
                        <el-button type="primary" @click="submit">提交</el-button>
                        <el-button @click="returnData">返回</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="right" style="width: 24%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)">
            <div
                style="
                    height: 30px;
                    line-height: 30px;
                    width: 100%;
                    border-bottom: 1px #ccc solid;
                    padding-left: 5px;
                "
            >
                线索跟进记录
            </div>
            <div style="padding: 10px; width: 100%">
                <el-row :gutter="20">
                    <el-col :span="20"
                        ><div class="grid-content ep-bg-purple" style="">
                            <div class="titleCon" style="font-size: 18px">{{ pageData.owner }}</div>
                            <div class="conCon">{{ pageData.belongTime }}</div>
                        </div></el-col
                    >
                </el-row>
            </div>
        </div>
    </div>
    <!-- 转为商机新增框 -->
    <el-dialog v-model="dialogVisible" title="提示" width="500" :before-close="handleClose">
        <Warning style="width: 1em; height: 1em; margin-right: 8px" />
        <span>是否将当期线索转为客户？</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="businessCancel">取消</el-button>
                <el-button type="primary" @click="businessSure">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 无效线索新增框 -->
    <el-dialog v-model="dialogVisible1" title="无效线索" width="500" :before-close="handleClose">
        <el-form
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="pageData"
            :rules="rules"
            label-width="auto"
        >
            <el-form-item label="原因" prop="record">
                <el-select
                    v-model="pageData.record"
                    size="large"
                    style="width: 400px"
                    placeholder="请选择无效原因"
                >
                    <el-option label="空号" value="空号">空号</el-option>
                    <el-option label="停机" value="停机">停机</el-option>
                    <el-option label="无法联系" value="无法联系">无法联系</el-option>
                    <el-option label="其他" value="其他">其他</el-option>
                </el-select></el-form-item
            >
            <el-form-item label="备注">
                <el-input
                    v-model="pageData.record"
                    style="width: 400px"
                    :rows="2"
                    type="textarea"
                    :placeholder="pageData.record === '其他' ? '请输入具体原因' : '请选择无效原因'"
                    :disabled="pageData.record !== '其他'"
            /></el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm(ruleFormRef)"> 确定 </el-button>
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { jumpData, submitData, getBusiness, getUnuse } from '@/api/clue';
import { onMounted, ref, reactive } from 'vue';
import { ElSelect, ElOption } from 'element-plus';
import { ElMessageBox, ElMessage, FormInstance, FormRules } from 'element-plus';
const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
// 校验规则
const rules = reactive<FormRules<pageDate>>({
    record: [
        {
            required: true,
            message: '请选择无效原因',
            trigger: 'change',
        },
    ],
});
const route = useRoute(); // 接收query传参
// const pageData = ref([]);
const pageData = ref({
    gender: null,
    age: null,
    level: 0,
    subject: 0,
    name: '',
    phone: '',
    weixin: '',
    qq: '',
    createTime: '',
    channelName: '',
    allocator: '',
    belongTime: '',
    owner: '',
    activityName: '',
    activityInfo: '',
    record: '',
    nextTime: '',
    status: null,
    failCount: 0,
    clueId: null,
});
// 根据id获取页面数据
function getpageData() {
    jumpData(route.query.clueId).then(res => {
        console.log(res);
        pageData.value = res.data;
        console.log(pageData);
    });
}
onMounted(() => {
    getpageData();
});
const handleChange = (value: number | undefined) => {
    console.log(value);
};
// 提交
import router from '@/router';
function submit() {
    submitData(pageData.value).then(res => {
        console.log('提交成功');
        router.push({ path: `/clue` });
    });
}
// 取消
function returnData() {
    router.push({ path: `/clue` });
}
// 转为商机提示
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done();
        })
        .catch(() => {
            // catch error
        });
};
// 转为商机方法
function business() {
    dialogVisible.value = true;
}
function businessSure() {
    getBusiness(route.query.clueId).then(res => {
        ElMessage({
            message: `${res.msg}`,
            type: 'success',
        });
    });
    router.push({ path: `/clue` });
    dialogVisible.value = false;
}
function businessCancel() {
    ElMessage('已取消操作');
    dialogVisible.value = false;
    router.push({ path: `/clue` });
}
// 转为无效线索
function unUser() {
    dialogVisible1.value = true;
}
// 无效线索新增文本域逻辑
const handleReasonChange = value => {
    if (value !== '其他') {
        pageData.value.record = value;
    } else {
        pageData.value.record = '';
    }
};
// 无用线索确认取消
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!');
        } else {
            console.log('error submit!', fields);
        }
    });
    getUnuse(pageData.value).then(res => {
        ElMessage({
            message: `${res.msg}`,
            type: 'success',
        });
        router.push({ path: `/clue` });
    });
    dialogVisible1.value = false;
    pageData.value.record = '';
};

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
    dialogVisible1.value = false;
    pageData.value.record = '';
    router.push({ path: `/clue` });
};
</script>

<style lang="scss" scoped>
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
.el-col {
    border-radius: 4px;
}

.grid-content {
    min-height: 45px;
    display: flex;
    flex-wrap: wrap;
    .titleCon {
        width: 100%;
        height: 22px;
        // background-color: aqua;
        font-weight: bold;
        font-style: italic;
    }
    .conCon {
        width: 100%;
        height: 22px;
        font-size: 13px;
        color: gray;
        // background-color: blue;
    }
}
</style>
